<template>
    <div style="height:81vh ;">

        <div class="flex-container" style="margin-left: 10vw; margin-top: 10vh; width: 80vw; ">
            <span style="width: 5vw;" for="name" class="form-label">用户名:</span>
            <input style="width: 20vw;" v-model="name" type="text" class="form-control" aria-describedby="请输入用户名">
            <el-button style="margin-left: 20vw;" type="success" @click="findone()">查找</el-button>
            <el-button style="margin-left: 20vw;" type="primary" @click="set()">切换</el-button>
        </div>

        <div> 
        <div>
            <el-table
                :data="charts"
                stripe
                style=" margin-left: 10vw; margin-top: 2vh; width: 80vw">
                <el-table-column
                prop="id"
                label="序号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="uid"
                label="读者ID"
                width="100">
                </el-table-column>
                <el-table-column
                prop="username"
                label="读者"
                width="200">
                </el-table-column>
                <el-table-column
                prop="bookname"
                label="书名"
                width="200">
                </el-table-column>
                <el-table-column
                prop="data"
                label="借书时间"
                width="300">
                </el-table-column>
                <el-table-column
                prop="state"
                label="状态"
                width="300">
                </el-table-column>
            </el-table>
    
        </div>
       
</div>
<div style="height: 10vh;"></div>
    </div>
   
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
    setup(){

        let store = useStore();
        let charts = ref([]);
        let name = ref('');
       
        const info =()=>{
            $.ajax({
                url:"http://localhost:3000/api/request/info/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                    charts.value = resp;
                    console.log(charts)                  
                }
                })
        }
        info()
        const findone = ()=>{
            $.ajax({
                url:"http://localhost:3000/api/request/findone/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                data:{
                      username:name.value
                    },
                success(resp){
                    charts.value = resp;
                    console.log(resp)
                }
                })
        }
        const set =()=>{
            $.ajax({
                url:"http://localhost:3000/api/request/state/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                success(resp){
                    charts.value = resp;
                    console.log(resp)
                }
                })
        }
        
        return{
            charts,
            name,
            findone,
            set,
     
    }

    }
}
</script>


<style scoped>
.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 元素之间的间距 */
}
</style>